<template>
  <div class="maxtirx-grid-card">
    <div class="grid-item-content">
      <div class="mgc-header">
        <div class="mgc-title" @click="onTitleClick">
          <svg-icon icon-class="chevron-double-right-dashed" />
          <span>{{ matrix.name }}</span>
        </div>
        <span class="actions">
          <MatrixStarButton :matrix-id="matrix.id" type="icon" class="px-2" />
          <MatrixShareButton :matrix-id="matrix.id" type="icon" class="px-2" />
          <i class="el-icon-refresh-right px-2" @click="onRefreshClick"></i>
        </span>
      </div>
      <div class="mgc-content" @click="onTitleClick">
        <div class="mgc-value">{{ value | formatValue }}</div>
        <div class="matrix-wrapper">
          <matrix-view ref="chart" :matrix-id="matrix.id" :panel-id="matrix.panelId" />
        </div>
      </div>
      <div class="mgc-tags">
        <el-tag v-for="(tag, i) in labels" :key="i" class="tag" type="info">{{ tag }}</el-tag>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from 'lodash'
import bus from '@/utils/bus'

import MatrixView from '@/components/vis/matrix/view'
import MatrixStarButton from './star-button'
import MatrixShareButton from './share-button'

export default {
  filters: {
    formatValue(v) {
      if (v === undefined) {
        return ''
      }

      if (Number.isInteger(v)) {
        return v
      } else {
        return v.toFixed(2)
      }
    },
  },
  components: { MatrixView, MatrixStarButton, MatrixShareButton },
  props: {
    matrix: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      value: undefined,
    }
  },
  computed: {
    labels() {
      return this.matrix.indexLabel ? this.matrix.indexLabel.split(',') : ''
    },
  },
  mounted() {
    bus.$on('chart-data-send', this.onDataSend)
  },
  destroyed() {
    bus.$off('chart-data-send')
  },
  methods: {
    onTitleClick() {
      console.log('onTitleClick')
      this.$router.push({
        name: 'IndicatorCenterView',
        params: { id: this.matrix.id },
        query: { panelId: this.matrix.panelId },
      })
    },
    onRefreshClick() {
      this.$refs.chart && this.$refs.chart.refresh()
    },
    onDataSend(payload) {
      try {
        const data = JSON.parse(payload)
        // console.log('onDataSend data=', data)
        if (data.sceneId !== this.matrix.panelId) {
          return
        }
        const values = get(data, 'data.series[0].data', [])
        if (values.length > 0) {
          this.value = values[values.length - 1].value
        }
      } catch (error) {
        console.log('onDataSend error=', error)
      }
    },
  },
}
</script>
<style lang="scss">
.maxtirx-grid-card {
  padding: 33% 0;
  position: relative;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 4px 6px 0px 0px rgba(0, 115, 229, 0.05);
  margin: 0 0 20px 0;
  border-radius: 8px;

  &:hover {
    outline: 1px solid var(--primary-color);
    box-shadow: 4px 6px 0px 0px rgba(0, 0, 229, 0.2);

    .grid-item-content {
      .mgc-header {
        .actions {
          display: inline;
        }
      }
    }
  }

  .grid-item-content {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer;

    .mgc-header {
      height: 56px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 16px;
      .mgc-title {
        display: flex;
        align-items: center;
        .svg-icon {
          font-size: 16px;
          margin-right: 8px;
        }
        span {
          font-size: 16px;
          font-weight: bold;
          cursor: pointer;
          &:hover {
            color: var(--primary-color);
            text-decoration: underline;
          }
        }
      }

      i:hover {
        color: var(--primary-color);
      }

      .actions {
        display: none;
      }
    }
    .mgc-content {
      display: flex;
      width: 100%;
      height: calc(100% - 120px);
      padding: 0 16px;
      .mgc-value {
        flex: 1;
        width: 50%;
        height: 100%;
        font-size: 32px;
        font-weight: 600;
      }
      .matrix-wrapper {
        flex: 1;
        width: 50%;
        height: 100%;
        overflow: hidden;

        .component-outer:hover {
          box-shadow: none;
        }
      }
    }

    .mgc-tags {
      width: 100%;
      height: 64px;
      padding: 16px;
      .tag {
        margin-right: 4px;
        margin-bottom: 4px;
        background-color: transparent;
      }
    }
  }
}
</style>
